<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import { useHeaderStore as useStore } from '../../../store/index'
import type { Live } from '../../../store/index'

const store = useStore()

const data = ref<Live>({
    hotLive: [],
    hotActive: []
})
onMounted(async () => {
    await store.getData()
    data.value = store.getLive
})
type live = {
    hotLive: {
        name: string,
        img: string
    }[],
    hotActive: {
        img: string
    }[]
}

</script>
<template>
    <div class="live-box">
        <div class="live-left">
            <div class="title">
                热门直播
            </div>
            <div class="live-face-list">
                <div class="live-face" v-for="item in data.hotLive" :key="item.name">
                    <img :src="item.img" alt="">
                    <div class="name">{{item.name}}</div>
                </div>
            </div>
        </div>
        <div class="live-right">
            <div class="title">
                热门活动
            </div>
            <div class="live-active-list">
                <div class="live-active" v-for="item in data.hotActive" :key="item.img">
                    <img :src="item.img" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<style lang='less' scoped>
.live-box {
    display: flex;

    .live-left {
        width: 256px;
        border-right: .5px solid #ccc;
        padding-right: 20px;

        .title {
            font-size: 20px;
        }

        .live-face-list {
            display: grid;
            grid: 1fr 1fr/1fr 1fr 1fr;
            gap: 16px;

            .live-face {
                display: flex;
                flex-direction: column;
                align-items: center;


                img {
                    border-radius: 50%;
                    width: 70px;
                    height: 70px;
                }

                .name {
                    font-size: 12px;
                    margin-top: 5px;
                    line-height: 12px;
                }
            }
        }
    }

    .live-right {
        padding-left: 20px;

        .title {
            font-size: 20px;
        }

        .live-active-list {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 198px;

            .live-active {
                width: 234px;
                height: 91px;
                border-radius: 8px;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;

                }
            }
        }
    }
}
</style>